<!-- 选项卡配置 -->
<template>
	<div>
		<el-form-item label="字体大小">
			<avue-input-number v-model="main.activeOption.fontSize" :disabled="disabled" :max="200"></avue-input-number>
		</el-form-item>
		<el-form-item label="字体颜色">
			<avue-input-color v-model="main.activeOption.color" :disabled="disabled"></avue-input-color>
		</el-form-item>
		<el-form-item label="类型">
			<avue-radio v-model="main.activeOption.type" :dic="dicOption.tabsTypeList" :disabled="disabled"></avue-radio>
		</el-form-item>
		<template v-if="main.activeOption.type === 'tabs'">
			<el-form-item label="间距">
				<avue-input-number v-model="main.activeOption.split" :disabled="disabled"></avue-input-number>
			</el-form-item>
			<el-collapse accordion>
				<el-collapse-item title="边框设置">
					<el-form-item label="背景颜色">
						<avue-input-color v-model="main.activeOption.backgroundColor" :disabled="disabled"></avue-input-color>
					</el-form-item>
					<el-form-item label="图标间距">
						<avue-input-number v-model="main.activeOption.iconSplit" :disabled="disabled"></avue-input-number>
					</el-form-item>
					<el-form-item label="图标大小">
						<avue-input-number v-model="main.activeOption.iconSize" :disabled="disabled"></avue-input-number>
					</el-form-item>
					<el-form-item label="图片地址">
						<img v-if="main.activeOption.backgroundImage" :src="main.activeOption.backgroundImage" alt="" width="100%" />
						<el-input v-model="main.activeOption.backgroundImage">
							<div @click="main.handleOpenImg('activeOption.backgroundImage', 'border')" slot="append">
								<i class="iconfont icon-img"></i>
							</div>
						</el-input>
					</el-form-item>
					<el-form-item label="边框颜色">
						<avue-input-color v-model="main.activeOption.borderColor" :disabled="disabled"></avue-input-color>
					</el-form-item>
					<el-form-item label="边框宽度">
						<avue-input-number v-model="main.activeOption.borderWidth" :disabled="disabled" :max="10"> </avue-input-number>
					</el-form-item>
					<el-form-item label="边框弧度">
						<avue-input-number v-model="main.activeOption.borderRadius" :disabled="disabled" :min="0"> </avue-input-number>
					</el-form-item>
				</el-collapse-item>
				<el-collapse-item title="高亮设置">
					<el-form-item label="背景高亮颜色">
						<avue-input-color v-model="main.activeOption.empBackgroundColor" :disabled="disabled"></avue-input-color>
					</el-form-item>
					<el-form-item label="字体高亮颜色">
						<avue-input-color v-model="main.activeOption.empColor" :disabled="disabled"></avue-input-color>
					</el-form-item>
					<el-form-item label="背景图片">
						<img v-if="main.activeOption.empBackgroundImage" :src="main.activeOption.empBackgroundImage" alt="" width="100%" />
						<el-input clearable v-model="main.activeOption.empBackgroundImage">
							<div @click="main.handleOpenImg('activeOption.empBackgroundImage', 'border')" slot="append">
								<i class="iconfont icon-img"></i>
							</div>
						</el-input>
					</el-form-item>
					<el-form-item label="边框颜色">
						<avue-input-color v-model="main.activeOption.empBorderColor" :disabled="disabled"></avue-input-color>
					</el-form-item>
					<el-form-item label="边框宽度">
						<avue-input-number v-model="main.activeOption.empBorderWidth" :disabled="disabled" :max="10"> </avue-input-number>
					</el-form-item>
				</el-collapse-item>
				<el-collapse-item title="轮播设置">
					<el-form-item label="轮播打开">
						<avue-switch v-model="main.activeOption.isAutoTabCarousel" :disabled="disabled"> </avue-switch>
					</el-form-item>
					<el-form-item label="轮播间隔">
						<avue-input-number v-model="main.activeOption.rotationTime" :disabled="disabled" :min="0"> </avue-input-number>
					</el-form-item>
				</el-collapse-item>
			</el-collapse>
		</template>
		<template v-if="main.activeOption.type === 'select'">
			<el-form-item label="风格">
				<avue-radio v-model="main.activeOption.cssStyle" :dic="dicOption.selectStyleList" :disabled="disabled"></avue-radio>
			</el-form-item>
			<el-form-item label="悬浮打开">
				<avue-switch v-model="main.activeOption.mouseOverOpen" :disabled="disabled"> </avue-switch>
			</el-form-item>
			<el-form-item label="支持清空">
				<avue-switch v-model="main.activeOption.clearable" :disabled="disabled"> </avue-switch>
			</el-form-item>
			<el-form-item label="支持搜索">
				<avue-switch v-model="main.activeOption.filterable" :disabled="disabled"> </avue-switch>
			</el-form-item>
			<el-form-item label="提示文字">
				<avue-input v-model="main.activeOption.placeholder" :disabled="disabled"> </avue-input>
			</el-form-item>
		</template>
	</div>
</template>

<script>
import { dicOption } from '@/option/config';
export default {
	name: 'tabs',
	data() {
		return {
			dicOption: dicOption,
			disabled: this.contain.activeObj.isLock
		};
	},
	inject: ['main', 'contain']
};
</script>

<style></style>
